<template>
    <div class="role-manage">
        <el-card class="box-card main-card">
            <template #header>
                <div class="card-header">
                    <span class="card-title">系统角色管理</span>
                    <div class="tips">
                        <el-tag type="info" effect="dark" class="system-tag">角色由系统预设，不支持新增/删除</el-tag>
                    </div>
                </div>
            </template>

            <el-table :data="roleList" border stripe highlight-current-row style="width: 100%" v-loading="loading"
                element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255, 0.8)" class="role-table">
                <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
                <el-table-column prop="name" label="角色名称" width="200">
                    <template #default="scope">
                        <div class="role-name">
                            <el-icon :class="getRoleIconClass(scope.row.id)">
                                <component :is="getRoleIcon(scope.row.id)" />
                            </el-icon>
                            <span>{{ scope.row.name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="角色描述"></el-table-column>
                <el-table-column label="类型" width="180" align="center">
                    <template #default="scope">
                        <el-tag :type="scope.row.id === 0 ? 'info' : scope.row.id === 1 ? 'success' : 'danger'"
                            effect="light" size="large" class="role-tag">
                            {{ scope.row.id === 0 ? '普通' : scope.row.id === 1 ? '管理' : '超级管理' }}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-card class="box-card permission-card main-card">
            <template #header>
                <div class="card-header">
                    <span class="card-title">权限说明</span>
                </div>
            </template>

            <el-row :gutter="24">
                <el-col :span="8">
                    <el-card class="role-card" shadow="hover">
                        <template #header>
                            <div class="role-card-header">
                                <el-icon class="role-icon user-icon">
                                    <User />
                                </el-icon>
                                <el-tag type="info" effect="dark" class="role-title-tag">普通用户</el-tag>
                            </div>
                        </template>
                        <ul class="permission-list">
                            <li>
                                <el-icon>
                                    <VideoPlay />
                                </el-icon>
                                <span>视频观看权限</span>
                            </li>
                            <li>
                                <el-icon>
                                    <ChatDotRound />
                                </el-icon>
                                <span>评论发布权限</span>
                            </li>
                            <li>
                                <el-icon>
                                    <Upload />
                                </el-icon>
                                <span>视频上传权限</span>
                            </li>
                            <li>
                                <el-icon>
                                    <User />
                                </el-icon>
                                <span>个人资料管理</span>
                            </li>
                        </ul>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card class="role-card" shadow="hover">
                        <template #header>
                            <div class="role-card-header">
                                <el-icon class="role-icon admin-icon">
                                    <Avatar />
                                </el-icon>
                                <el-tag type="success" effect="dark" class="role-title-tag">管理员</el-tag>
                            </div>
                        </template>
                        <ul class="permission-list">
                            <li>
                                <el-icon>
                                    <UserFilled />
                                </el-icon>
                                <span>普通用户所有权限</span>
                            </li>
                            <li>
                                <el-icon>
                                    <Finished />
                                </el-icon>
                                <span>内容审核权限</span>
                            </li>
                            <li>
                                <el-icon>
                                    <ChatLineRound />
                                </el-icon>
                                <span>评论管理权限</span>
                            </li>
                            <li>
                                <el-icon>
                                    <VideoCamera />
                                </el-icon>
                                <span>视频管理权限</span>
                            </li>
                        </ul>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card class="role-card" shadow="hover">
                        <template #header>
                            <div class="role-card-header">
                                <el-icon class="role-icon super-admin-icon">
                                    <Star />
                                </el-icon>
                                <el-tag type="danger" effect="dark" class="role-title-tag">超级管理员</el-tag>
                            </div>
                        </template>
                        <ul class="permission-list">
                            <li>
                                <el-icon>
                                    <Avatar />
                                </el-icon>
                                <span>管理员所有权限</span>
                            </li>
                            <li>
                                <el-icon>
                                    <UserFilled />
                                </el-icon>
                                <span>用户管理权限</span>
                            </li>
                            <li>
                                <el-icon>
                                    <Setting />
                                </el-icon>
                                <span>角色管理权限</span>
                            </li>
                            <li>
                                <el-icon>
                                    <Tools />
                                </el-icon>
                                <span>系统配置权限</span>
                            </li>
                        </ul>
                    </el-card>
                </el-col>
            </el-row>

            <el-divider>
                <el-icon class="divider-icon">
                    <InfoFilled />
                </el-icon>
                <span class="divider-text">角色与权限对应关系</span>
            </el-divider>

            <div class="permission-table-container">
                <el-table :data="permissionList" border stripe class="permission-table">
                    <el-table-column prop="name" label="权限名称" width="200">
                        <template #default="scope">
                            <div class="permission-name">
                                <el-icon>
                                    <component :is="scope.row.icon" />
                                </el-icon>
                                <span>{{ scope.row.name }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="description" label="权限描述"></el-table-column>
                    <el-table-column label="普通用户" width="120" align="center">
                        <template #default="scope">
                            <el-icon :class="scope.row.user ? 'permission-granted' : 'permission-denied'">
                                <component :is="scope.row.user ? 'Check' : 'Close'" />
                            </el-icon>
                        </template>
                    </el-table-column>
                    <el-table-column label="管理员" width="120" align="center">
                        <template #default="scope">
                            <el-icon :class="scope.row.admin ? 'permission-granted' : 'permission-denied'">
                                <component :is="scope.row.admin ? 'Check' : 'Close'" />
                            </el-icon>
                        </template>
                    </el-table-column>
                    <el-table-column label="超级管理员" width="120" align="center">
                        <template #default="scope">
                            <el-icon :class="scope.row.superAdmin ? 'permission-granted' : 'permission-denied'">
                                <component :is="scope.row.superAdmin ? 'Check' : 'Close'" />
                            </el-icon>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
// import {
//     User, UserFilled, VideoPlay, ChatDotRound, Upload, Avatar, Finished,
//     ChatLineRound, VideoCamera, Setting, Tools, Star, InfoFilled,
//     Check, Close
// } from '@element-plus/icons-vue';

export default {
    name: "RoleManage",
    data() {
        return {
            roleList: [],
            loading: false,
            // 权限列表
            permissionList: [
                {
                    name: '视频观看',
                    description: '可以观看平台上的视频内容',
                    icon: 'VideoPlay',
                    user: true,
                    admin: true,
                    superAdmin: true
                },
                {
                    name: '视频上传',
                    description: '可以上传视频内容到平台',
                    icon: 'Upload',
                    user: true,
                    admin: true,
                    superAdmin: true
                },
                {
                    name: '评论发布',
                    description: '可以在视频下方发表评论',
                    icon: 'ChatDotRound',
                    user: true,
                    admin: true,
                    superAdmin: true
                },
                {
                    name: '内容审核',
                    description: '审核用户上传的视频内容',
                    icon: 'Finished',
                    user: false,
                    admin: true,
                    superAdmin: true
                },
                {
                    name: '评论管理',
                    description: '管理用户发布的评论内容',
                    icon: 'ChatLineRound',
                    user: false,
                    admin: true,
                    superAdmin: true
                },
                {
                    name: '用户管理',
                    description: '管理系统用户，包括封禁、角色分配等',
                    icon: 'UserFilled',
                    user: false,
                    admin: false,
                    superAdmin: true
                },
                {
                    name: '系统配置',
                    description: '配置系统参数和全局设置',
                    icon: 'Setting',
                    user: false,
                    admin: false,
                    superAdmin: true
                }
            ]
        };
    },
    created() {
        this.getRoleList();
    },
    methods: {
        // 获取角色列表
        async getRoleList() {
            this.loading = true;
            try {
                const response = await this.$get('/admin/role/list');
                if (response.data.code === 200) {
                    // 假设后端返回格式为 {code: 200, message: "OK", data: [{roles}]}
                    this.roleList = response.data.data;
                } else {
                    this.$message.error(response.data.message || '获取角色列表失败');
                }
            } catch (error) {
                console.error('获取角色列表失败', error);
                this.$message.error('获取角色列表失败');
            } finally {
                this.loading = false;
            }
        },
        // 获取角色图标
        getRoleIcon(roleId) {
            switch (roleId) {
                case 0: return 'User';
                case 1: return 'Avatar';
                case 2: return 'Star';
                default: return 'User';
            }
        },
        // 获取角色图标类名
        getRoleIconClass(roleId) {
            switch (roleId) {
                case 0: return 'role-list-icon user-icon';
                case 1: return 'role-list-icon admin-icon';
                case 2: return 'role-list-icon super-admin-icon';
                default: return 'role-list-icon';
            }
        }
    }
};
</script>

<style scoped>
.role-manage {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: calc(100vh - 60px);
}

.main-card {
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    transition: all 0.3s;
    overflow: hidden;
}

.main-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

.permission-card {
    margin-top: 30px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f2f5;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    position: relative;
    padding-left: 12px;
}

.card-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background: #409EFF;
    border-radius: 2px;
}

.system-tag {
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 500;
}

.role-table {
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.role-name {
    display: flex;
    align-items: center;
    font-weight: 500;
}

.role-name .el-icon {
    margin-right: 8px;
    font-size: 18px;
}

.role-list-icon {
    padding: 6px;
    border-radius: 50%;
    color: white;
    font-size: 14px;
}

.user-icon {
    background-color: #909399;
}

.admin-icon {
    background-color: #67c23a;
}

.super-admin-icon {
    background-color: #f56c6c;
}

.role-tag {
    padding: 6px 16px;
    font-weight: 500;
    border-radius: 20px;
    transition: all 0.3s;
}

.role-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.role-card {
    height: 100%;
    margin-bottom: 20px;
    border-radius: 8px;
    transition: all 0.3s;
    overflow: hidden;
}

.role-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.role-card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    position: relative;
}

.role-icon {
    position: absolute;
    left: 15px;
    padding: 8px;
    border-radius: 50%;
    color: white;
    font-size: 16px;
}

.role-title-tag {
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 20px;
}

.permission-list {
    padding-left: 10px;
    line-height: 2.2;
    list-style-type: none;
}

.permission-list li {
    margin-bottom: 10px;
    font-size: 14px;
    color: #606266;
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.permission-list li:hover {
    background-color: #f5f7fa;
}

.permission-list li .el-icon {
    margin-right: 8px;
    font-size: 16px;
    color: #409EFF;
}

.divider-icon {
    margin-right: 8px;
    color: #409EFF;
}

.divider-text {
    font-size: 16px;
    font-weight: 500;
    color: #606266;
}

.permission-table-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

.permission-table {
    border-radius: 8px;
    overflow: hidden;
}

.permission-name {
    display: flex;
    align-items: center;
}

.permission-name .el-icon {
    margin-right: 8px;
    color: #409EFF;
}

.permission-granted {
    color: #67c23a;
    font-size: 18px;
}

.permission-denied {
    color: #f56c6c;
    font-size: 18px;
}

/* 使表格更加美观 */
:deep(.el-table th) {
    background-color: #f5f7fa;
    font-weight: 600;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
    background-color: #fafbfc;
}

:deep(.el-table__row:hover td) {
    background-color: #ecf5ff !important;
}

:deep(.el-pagination) {
    padding: 15px 0;
    font-weight: 500;
}
</style>